<template>
    {{ user }}
    <a-input v-model:value="searchQuery"></a-input>
    {{ repositories }}
</template>

<script lang="ts">
import { toRefs, defineComponent } from "vue";
import useUserRepositories from "../composables/useUserRepositories";
import useRepositoryNameSearch from "../composables/useRepositoryNameSearch";

export default defineComponent({
    name: "UserRepositories",
    props: {
        user: {
            type: String,
            required: true,
        },
    },
    setup(props) {
        const { user } = toRefs(props);
        const { repositories, getUserRepositories } = useUserRepositories(user);

        const {
            searchQuery,
            repositoriesMatchingSearchQuery,
        } = useRepositoryNameSearch(repositories);

        return {
            repositories: repositoriesMatchingSearchQuery,
            getUserRepositories,
            searchQuery,
        };
    },
});
</script>
